<template>
  <div class="toolbar__header">
    <el-button-group key="file-control">
      <el-button :size="headerButtonSize" :type="headerButtonType" @click="onSave">
        <el-icon class="el-icon--left">
          <Edit />
        </el-icon>保存流程
      </el-button>
      <el-button :size="headerButtonSize" :type="headerButtonType" @click="onOpenFile">
        <el-icon class="el-icon--left">
          <FolderOpened />
        </el-icon>打开文件
      </el-button>
      <el-tooltip effect="light">
        <template #content>
          <el-button :size="headerButtonSize" type="text" @click="onDownloadProcess('xml')">下载为XML文件</el-button>
          <br />
          <el-button :size="headerButtonSize" type="text" @click="onDownloadProcess('svg')">下载为SVG文件</el-button>
          <br />
          <el-button :size="headerButtonSize" type="text" @click="onDownloadProcess('bpmn')">下载为BPMN文件</el-button>
        </template>
        <el-button :size="headerButtonSize" :type="headerButtonType">
          <el-icon class="el-icon--left">
            <Download />
          </el-icon>
          下载文件
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light">
        <template #content>
          <el-button :size="headerButtonSize" type="text" @click="onPreviewProcessXML">预览XML</el-button>
          <br />
          <el-button :size="headerButtonSize" type="text" @click="onPreviewProcessJson">预览JSON</el-button>
        </template>
        <el-button :size="headerButtonSize" :type="headerButtonType">
          <el-icon class="el-icon--left">
            <View />
          </el-icon>预览
        </el-button>
      </el-tooltip>
      <el-tooltip v-if="simulation" effect="light" :content="this.simulationStatus ? '退出模拟' : '开启模拟'">
        <el-button :size="headerButtonSize" :type="headerButtonType" @click="onProcessSimulation">
          <el-icon class="el-icon--left">
            <Cpu />
          </el-icon>模拟
        </el-button>
      </el-tooltip>
    </el-button-group>
    <el-button-group key="align-control">
      <el-tooltip effect="light" content="向左对齐">
        <el-button :size="headerButtonSize" class="align align-left" @click="onElementsAlign('left')">
          <el-icon>
            <CaretLeft />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="向右对齐">
        <el-button :size="headerButtonSize" class="align align-right" @click="onElementsAlign('right')">
          <el-icon>
            <CaretRight />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="向上对齐">
        <el-button :size="headerButtonSize" class="align align-top" @click="onElementsAlign('top')">
          <el-icon>
            <CaretTop />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="向下对齐">
        <el-button :size="headerButtonSize" class="align align-bottom" @click="onElementsAlign('bottom')">
          <el-icon>
            <CaretBottom />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="水平居中">
        <el-button :size="headerButtonSize" class="align align-center" @click="onElementsAlign('center')">
          <el-icon>
            <Minus />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="垂直居中">
        <el-button :size="headerButtonSize" class="align align-middle" @click="onElementsAlign('middle')">
          <el-icon>
            <DCaret />
          </el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>
    <el-button-group key="scale-control">
      <el-tooltip effect="light" content="缩小视图">
        <el-button :size="headerButtonSize" :disabled="defaultZoom <= 0.3" @click="onProcessZoomOut()">
          <el-icon>
            <ZoomOut />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-button :size="headerButtonSize">{{ Math.floor(this.defaultZoom * 10 * 10) + "%" }}</el-button>
      <el-tooltip effect="light" content="放大视图">
        <el-button :size="headerButtonSize" :disabled="defaultZoom >= 3.9" @click="onProcessZoomIn()">
          <el-icon>
            <ZoomIn />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="重置视图并居中">
        <el-button :size="headerButtonSize" @click="onProcessReZoom()">
          <el-icon>
            <ScaleToOriginal />
          </el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>
    <el-button-group key="stack-control">
      <el-tooltip effect="light" content="撤销">
        <el-button :size="headerButtonSize" :disabled="!revocable" @click="onProcessUndo()">
          <el-icon>
            <RefreshLeft />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="恢复">
        <el-button :size="headerButtonSize" :disabled="!recoverable" @click="onProcessRedo()">
          <el-icon>
            <RefreshRight />
          </el-icon>
        </el-button>
      </el-tooltip>
      <el-tooltip effect="light" content="重新绘制">
        <el-button :size="headerButtonSize" @click="onProcessRestart">
          <el-icon>
            <refresh />
          </el-icon>
        </el-button>
      </el-tooltip>
    </el-button-group>
  </div>
</template>
<script setup>
let props = defineProps({
  headerButtonSize: {
    type: String,
    default: "medium"
  },
  headerButtonType: {
    type: String,
    default: "primary"
  },
  simulation: {
    type: Boolean,
    default: false
  },
  simulationStatus: {
    type: Boolean,
    default: false
  },
  recoverable: {
    type: Boolean,
    default: false
  },
  defaultZoom: {
    type: Number,
    default: 1
  },
})
let emits = defineEmits([
  'onSave', 'onOpenFile', 'onDownloadProcess', 'onPreviewProcessXML', 'onPreviewProcessJson', 'onProcessSimulation', 'onElementsAlign',
  'onProcessZoomOut', 'onProcessZoomIn', 'onProcessReZoom', 'onProcessUndo', 'onProcessRedo', 'onProcessRestart',
])

const onSave = (data) => { emits('onSave', data) }
const onOpenFile = (data) => { emits('onOpenFile', data) }
const onDownloadProcess = (data) => { emits('onDownloadProcess', data) }
const onPreviewProcessXML = (data) => { emits('onPreviewProcessXML', data) }
const onPreviewProcessJson = (data) => { emits('onPreviewProcessJson', data) }
const onProcessSimulation = (data) => { emits('onProcessSimulation', data) }
const onElementsAlign = (data) => { emits('onElementsAlign', data) }
const onProcessZoomOut = (data) => { emits('onProcessZoomOut', data) }
const onProcessZoomIn = (data) => { emits('onProcessZoomIn', data) }
const onProcessReZoom = (data) => { emits('onProcessReZoom', data) }
const onProcessUndo = (data) => { emits('onProcessUndo', data) }
const onProcessRedo = (data) => { emits('onProcessRedo', data) }
const onProcessRestart = (data) => { emits('onProcessRestart', data) }

</script>
<style></style>
